<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="报销类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择">
                    <el-option
                            v-for="item in statList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报销金额" prop="amount">
                <el-input v-model="ruleForm.amount"></el-input>
            </el-form-item>
            <el-form-item label="报销日期" prop="exTm">
                <el-date-picker
                        v-model="ruleForm.exTm"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态" prop="stat">
                <el-select v-model="ruleForm.stat" placeholder="请选择">
                    <el-option
                            v-for="item in statList1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="ruleForm.description">
                </el-input>
            </el-form-item>
            <el-form-item label="选择报销单" >
                <el-upload
                        ref="upload"
                        :limit="1"
                        list-type="picture-card"
                        :auto-upload="false"
                        :on-preview="handlePictureCardPreview"
                        action="#"
                        :on-exceed="handleExceed"
                        :http-request="uploadFile"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog >
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {insertExpense}from '@/api/financeApi'
    export default {
        data() {
            return {
                ruleForm: {
                    type: '',
                    amount: '',
                    exTm:'',
                    stat: '',
                    description: '',
                },
                statList1:[
                    {
                        value: '0',
                        label: '已报销'
                    },
                    {
                        value: '1',
                        label: '未报销'
                    },
                ],
                statList:[
                    {
                        value: '0',
                        label: '租金'
                    },
                    {
                        value: '1',
                        label: '设备'
                    },
                    {
                        value: '2',
                        label: '电费'
                    },
                    {
                        value: '3',
                        label: '其他'
                    },
                ],
                dialogImageUrl:'',
                formDate:'',
                rules: {
                    type: [
                        { required: true, message: '报销类型不可为空', trigger: 'change' },
                    ],
                    amount: [
                        { required: true, message: '报销金额不可为空', trigger: 'blur' },
                    ],
                    exTm: [
                        { required: true, message: '报销日期不可为空', trigger: 'blur' }
                    ],
                    stat: [
                        { required: true, message: '状态不可为空', trigger: 'change' }
                    ],
                }
            };
        },
        methods: {
            handleExceed(){
                this.$message.warning("报销单只能选择一个")
            },
            uploadFile(file){
                this.formDate.append('file', file.file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
            },
            //提交
            submit () {
                return new Promise((resolve, reject) => {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            this.formDate = new FormData()
                            this.$refs.upload.submit();
                            //表单数据追加到formDate中
                            this.formDate.append("paramMap",JSON.stringify(this.ruleForm))
                            insertExpense(this.formDate).then(res => {
                                resolve(res.data)
                            }).catch(e => {
                                reject(e)
                                this.$message.error({
                                    message: '抱歉，操作遇到异常，请重试或联系管理员处理'
                                })
                            })
                        } else {
                            this.$message.error('业务校验未通过')
                            reject(new Error('业务校验失败'))
                        }
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
